<template>
  <div>
    <div class="tab-bar" v-show="deliveries.length > 1">
      <div v-for="(traces,index) in deliveries" :key="index" :class="{'active':activeIndex==index}" @click="tabClick(index)">包裹{{index+1}}</div>
    </div>

    <div class="logisticsBox" v-for="(traces,index) in deliveries" :key="index"  :hidden="activeIndex != index">
      <div class="order-list" v-if="traces.products">
        <dl v-for="(product, index3) in traces.products" :key="index3">
          <dt><img :src="product.product_cover + '?x-oss-process=image/resize,m_pad,h_400,w_400,color_ffffff/quality,Q_80/format,jpg'">
            </dt>
          <dd>
            <h2>{{product.designer_name}}</h2>
            <p>{{product.product_name}}</p>
            <p class="gray">尺码 ：{{product.size}}</p>
          </dd>
          <h3>{{product.currency_logo}}{{product.show_price}}<font>x{{product.product_qty}}</font>
          </h3>
        </dl>
      </div>

      <div class="logisticsDom" v-if="traces.delivery_info">
        <h2>共{{traces.delivery_info.total_qty}}件商品　由【{{traces.delivery_info.company_name}}】承运</h2>
        <h3>运单编号:{{traces.delivery_info.delivery_number}}</h3>
        <span class="copyBtn" @click="copyTBL(traces.delivery_info.delivery_number)">复制</span>
      </div>

      <div class="logistics">
        <div class="logistics-list">
          <dl :class="{'current': index2 == 0}" v-for="(item,index2) in traces.trace" :key="index2">
            <dt><i class="iconfont icon-Hook"></i></dt>
            <dd>{{item.context}}<p>{{item.time}}</p>
            </dd>
          </dl>
        </div>
      </div>
    </div>

    <placeholder :show.sync="errorPage" :message.sync="errorMsg" :hidden.sync="hidden" @tryAgain="onEmpty"/>
  </div>

</template>

<script>
import placeholder from '@/components/placeholder'
export default {
  data() {
    return {
      activeIndex:0,
      deliveries: [],
      tracesLen:0,
      errorPage: false,
      hidden: false,
      errorMsg: ""
    }
  },
  onLoad() {
    this.$wx.setTitleBarTitle('订单跟踪')
    this.getdata()
  },
  computed: {},
  methods: {
    tabClick(index){
      this.activeIndex = index
    },
    async getdata() {
      const data = await this.$fly.post(this.$url.URL_ORDERTRACE, {
        order_no: this.$root.$mp.query.orderNo
      })
      console.log(data)
      if (data.successCode === 1) {
        this.deliveries = data.data.traces;
        this.errorPage = false;
        this.hidden = true;
      } else {
        this.errorPage = true;
        this.hidden = false;
        this.errorMsg = data.message;
      }
    },
    onEmpty() {
      this.getdata();
    },
    copyTBL(deliveryNumber) {
      var self = this
      wx.setClipboardData({
        data: deliveryNumber,
        success: function(res) {
          self.$wx.showLongToast('复制成功')
        }
      })
    }
  },
  mounted() {},
  components: {
    placeholder
  }
}
</script>

<style scoped>
.logisticsBox{margin-top: 44px}
</style>
